﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
    <title></title>    
    <style>
        .IRSlideContainer
        {
            display:block;
            position:relative;
            border:1px solid #346f97;
            border-radius:10px;
            background-image:none;
            background-origin:padding-box;
            background-clip:border-box;
            background-color:#F0F6F9;
            width:67px;
            height:182px;
            padding:40px 20px;
        }
        .IRSlideClip
        {
            overflow:hidden;
            width:75px;
            height:182px;
            position:relative;
        }
        .IRSlide-list
        {
            overflow: hidden;
            position: relative;
            top: 0;
            margin: 0;
            padding: 0;
            left:0px;
        }
        .IRSlide-Item
        {
            margin-bottom:10px;
        }
        .IRSlide-Prev
        {
            left:43px;
            top:5px;
            width:32px;
            height:32px;
            background-image:url();
            background-repeat:no-repeat;
            background-size:auto;
            background-origin:padding-box;
            background-clip:border-box;
            cursor:default;
            background-position-x:0px;
            background-position-y:-96px;
        }
        .IRSlide-Next
        {
            left:43px;
            width:32px;
            height:32px;
            bottom:5px;
            background-attachment:scroll;
            background-image:url();
            background-repeat:no-repeat;
            background-size:auto;
            background-origin:padding-box;
            background-clip:border-box;
            cursor:default;
            background-position-x:0px;
            background-position-y:0px;
        }
        .IRSlidePrev
        {
            position:absolute;
            height:32px;
            width:32px;
            left:40px;
            top:5px;
        }
        .IRSlideNext
        {
            position:absolute;
            height:32px;
            width:32px;
            left:40px;
        }
        #preview{
          position:absolute;
          border:3px solid #ccc;
          background:#333;
          padding:5px;
          display:none;
          color:#fff;
          box-shadow: 4px 4px 3px rgba(103, 115, 130, 1);
        }
    </style>
</head>
<body>
    <div class="IRSlideContainer" id="IRCarouselContainer">
        <div class="IRSlideClip">
            <ul class="IRSlide-list">
                <li title="testinformation" class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide1.JPG"">
                    <img width="67" height="50" alt="1" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide1s.JPG"/></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide2.JPG">
                    <img width="67" height="50" alt="2" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide2s.JPG" /></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide3.JPG">
                    <img width="67" height="50" alt="3" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide3s.JPG" /></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide4.JPG">
                    <img width="67" height="50" alt="4" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide4s.JPG" /></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide5.JPG">
                    <img width="67" height="50" alt="5" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide5s.JPG" /></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide6.JPG">
                    <img width="67" height="50" alt="6" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide6s.JPG" /></li>
                <li class="IRSlide-Item" style="float:left;list-style-image:none;list-style-position:outside;list-style-type:none;" slide="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide7.JPG">
                    <img width="67" height="50" alt="7" src="http://cspauthoringppe:8000/global/investor/PublishingImages/Events/Slides/Bill_Koefoed_FAM_2011/Slide7s.JPG" /></li>
            </ul>
            </div>
        <div class="IRSlidePrev" style="display:block;">UP</div>
        <div class="IRSlideNext" style="display:block;">DOWN</div>
    </div>
    <div class="btn_test" style="display:block;">RUN</div>
    <p id="p1"></p>
    <div style="width:400px;height:400px;border:1px solid red;">chapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter testchapter test</div>
</body>
    <script>
        (function ($) {
            $.fn.irCarousel = function (o) {
                var options = $.extend({
                    dispCount: 3,
                    initPos: 0,
                    scrollCount: 1,
                    scrollspeed: 1000,
                    delay: 5000,
                    autoscroll: false,
                    onthumbnailclick: null
                }, o);
                this.container = null;
                this.clip = null;
                this.list = null;
                this.buttonNext = null;
                this.buttonPrev = null;
                this.buttonTest = null;
                this.buttonNextState = null;
                this.buttonPrevState = null;
                this.animating = false;
                this.itemHeight = 0;
                this.animating = false;

                return this.each(function () {
                    var $this = $(this);
                    var methods = {
                        init: function () {
                            $this.container = $this;
                            $this.clip = $this.find('div.IRSlideClip');
                            $this.list = $this.find('ul.IRSlide-list');
                            $this.buttonNext = $this.find('div.IRSlideNext');
                            $this.buttonPrev = $this.find('div.IRSlidePrev');
                            $this.buttonTest = $('div.btn_test');
                            $this.total = $this.list.children('li').length > 0 ? $this.list.children('li').length : 0;
                            $this.curPos = options.initPos;
                            $this.itemHeight = $this.list.children('li').length > 0 ? methods.dimension($this.list.children('li')[0]) : 0;
                            var li = $this.list.children('li');
                            if (li.size() > 0) {
                                var wh = 0, j = 1;
                                li.each(function () {
                                    methods.format(this, j++);
                                    wh += methods.dimension(this, null);
                                    xOffset = 10;
                                    yOffset = 10;
                                    $(this).hover(function (e) {
                                        this.t = this.title;
                                        this.title = "";
                                        var c = (this.t != "") ? "<br/>" + this.t : "";
                                        $("body").append("<p id='preview'><img src='" + $(this).attr("slide") + "' alt='Image preview' width='350'/>" + c + "</p>");
                                        $("#preview")
                                           .css("top", (e.pageY - xOffset) + "px")
                                           .css("left", (e.pageX + yOffset) + "px")
                                           .fadeIn("slow");
                                    },
                                    function () {
                                        this.title = this.t;
                                        $("#preview").remove();
                                    });
                                    $(this).mousemove(function (e) {
                                        $("#preview")
                                            .css("top", (e.pageY - xOffset) + "px")
                                            .css("left", (e.pageX + yOffset) + "px");
                                    });
                                });
                            }
                            $this.list.css('height', (wh + 100) + 'px');
                            $this.clip.css('height', $this.clipHeight + 'px');
                            $this.list.css('top', ($this.curPos * $this.itemHeight) + 'px');
                            methods.setButtons();
                        },
                        moveNext: function () {
                            $this.prevPos = $this.curPos;
                            $this.curPos += options.scrollCount;
                            if ($this.curPos > ($this.total - options.dispCount)) {
                                $this.curPos = $this.total - options.dispCount;
                            }
                            methods.animate(-($this.curPos * $this.itemHeight))
                        },
                        movePrevious: function () {
                            $this.prevPos = $this.curPos;
                            $this.curPos -= options.scrollCount;
                            if ($this.curPos < 0) {
                                $this.curPos = 0;
                            }
                            methods.animate(-($this.curPos * $this.itemHeight))
                        },
                        moveTo: function () {
                            var tagPos = 2;
                            var _scrollCount = 0;
                            if (tagPos > $this.curPos) {
                                $this.prevPos = $this.curPos;
                                _scrollCount = tagPos - $this.curPos;
                                $this.curPos += _scrollCount;
                                methods.animate(-($this.curPos * $this.itemHeight))

                            } else if (tagPos < $this.curPos) {
                                $this.prevPos = $this.curPos;
                                _scrollCount = $this.curPos - tagPos;
                                $this.curPos -= _scrollCount;
                                methods.animate(-($this.curPos * $this.itemHeight))
                            }
                        },
                        setButtons: function (next, prev) {
                            $this.buttonTest.bind('click.ircarousel', methods.moveTo);

                            if (next == null) {
                                next = ($this.total !== 0) && (($this.curPos + options.dispCount) < $this.total)
                            }
                            if (prev == null) {
                                prev = ($this.curPos > 0)
                            }
                            if ($this.buttonNext.length > 0) {
                                $this.buttonNext.unbind('click.ircarousel', methods.moveNext);
                                if (next) {
                                    $this.buttonNext.bind('click.ircarousel', methods.moveNext);
                                }
                                $this.buttonNext[next ? 'removeClass' : 'addClass'](('ircarousel-next-disabled-verical')).attr('disabled', next ? false : true);
                            }
                            if ($this.buttonPrev.length > 0) {
                                $this.buttonPrev.unbind('click.ircarousel', methods.movePrevious);

                                if (prev) {
                                    $this.buttonPrev.bind('click.ircarousel', methods.movePrevious);
                                }

                                $this.buttonPrev[prev ? 'removeClass' : 'addClass'](('ircarousel-prev-disabled-vertical')).attr('disabled', prev ? false : true);
                            }
                        },
                        animate: function (pos) {
                            $this.animating = true;
                            var scrolled = function () {
                                $this.animating = false;
                                if (pos === 0) {
                                    $this.list.css('top', 0);
                                }
                                methods.setButtons();
                            }
                            var settings = {
                                duration: 'normal',
                                easing: 'swing',
                                complete: scrolled
                            };
                            $this.list.animate({ 'top': pos }, settings);
                        },
                        format: function (e, i) {
                            e = $(e);
                            var split = e.get(0).className.split(' ');
                            for (var j = 0; j < split.length; j++) {
                                if (split[j].indexOf('ircarousel-') != -1) {
                                    e.removeClass(split[j]);
                                }
                            }
                            e.addClass(methods.className('ircarousel-item')).addClass(this.className('ircarousel-item-' + i)).css({
                                'float': ('left'),
                                'list-style': 'none'
                            }).attr('ircarouselindex', i);
                            return e;
                        },
                        className: function (c) {
                            return c + ' ' + c + ('-vertical');
                        },
                        dimension: function (e, d) {
                            var el = $(e);
                            if (d == null) {
                                return el.outerHeight(true);
                            } else {
                                var w = d - (el.css('marginTop')) - (el.css('marginBottom'));
                                $(el).css(this.wh, w + 'px');
                                return this.dimension(el);
                            }
                        }
                    }
                    methods.init();
                });
            };
        })(jQuery);
        jQuery(document).ready(function () {
            jQuery('#IRCarouselContainer').irCarousel();
        });

    </script>
</html>